<template>
	 
	<u-popup :show="visible" :round="10" mode="bottom" closeOnClickOverlay="true" @close="visible=false">
		<view class="server-time-popup">
		  <view class="server-time-popup__interval">
			<text
			  :class="{ actived: currentInterval === item.value }"
			  v-for="item in intervalType"
			  :key="item.value"
			  @click="currentInterval = item.value"
			>
			  {{ item.label }}
			</text>
		  </view>
		  <view class="server-time-popup__list">
			<view
			  class="server-time-popup__list--item"
			  v-for="item in currentInterval == 1 ? beforeTwelfthTimeList : afterTwelfthTimeList"
			  :key="item.time"
			  :class="{ disabled: !item.select }"
			>
			  <text>{{ item.time }}</text>
			  <text>{{ item.select ? '' : '不' }}可选</text>
			</view>
		  </view>
		</view>
	  </u-popup>
 
</template>

<script>
	import {getUserTimeAPI} from "@/api/api.js"
	import {getDate} from "@/utils/utils.js"
	export default {
		name:"serverTimePopup",
		props:{
			 staffId: {
			    type: String,
			    default: '',
			  },
			  merchantId:{
				 type: String,
				 default: '', 
			  }
		},
		data() {
			return {
				intervalType: [
				  { value: 1, label: '00:00-11:59' },
				  { value: 2, label: '12:00-23:59' },
				],
				currentInterval:1,
				beforeTwelfthTimeList:[],
				afterTwelfthTimeList:[],
				visible:false
			};
		},
		methods:{
			open(){
				let serviceDate=getDate().fullDate
				getUserTimeAPI({
					staffUserId: this.staffId,
					merchantId: this.merchantId,
					serviceDate,
				}).then((res) => {
					this.visible=true
					res[serviceDate].forEach((item) => {
					  const hour =  item.time.split(":")[0]
					  if (hour < 12) {
						this.beforeTwelfthTimeList.push(item)
					  } else {
						this.afterTwelfthTimeList.push(item)
					  }
					})
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
.server-time-popup {
  padding:  40rpx;
  &__interval {
    display: flex;
    justify-content: center;
    gap: 180rpx;
    margin-bottom: 36rpx;
    text {
      color: #333;
      font-size: 32rpx;
      font-weight: bold;
      &.actived {
        color: $uni-color-primary;
      }
    }
  }
  &__list {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-gap: 10rpx;
    &--item {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 10rpx 0;
      background-color: #f2f2f2ff;
      border-radius: 8rpx;
      color: #333;
      text {
        font-size: 28rpx;
        &:last-child {
          font-size: 20rpx;
        }
      }
    }
    .disabled {
      opacity: 0.55;
    }
  }
}
</style>
